<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边角效果</title>
    <style>
        .box{
            background-color: #666;
            width:300px;
            height:200px;
            position: relative;
            z-index: 0;
        }
        .content{
            width:100%;
            height:100%;
            background-color: #e15671;
            position: relative;
        }
        /*边角卷边阴影*/
        .content:before,.content:after{
            content: '';
            width:90%;
            height:20%;
            box-shadow:0 8px 16px rgba(0,0,0,.3);
            position: absolute;
            z-index: -1;
        }
        .content:before{
            transform: skew(-15deg) rotate(-5deg);
            transform-origin: left bottom;
            left:0;
            bottom: 0;
        }
        .content:after{
            transform: skew(15deg) rotate(5deg);
            transform-origin: right bottom;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="box">
<!--    z-index负值实际项目中的用处-->
<!--    可访问性隐藏-->
<!--    z-index负值可以隐藏元素，只需要层叠上下文内的某一个父元素加个背景色就可以。它与clip隐藏想必的一个优势是：元素无须绝对定位，设置position:relative就可以隐藏，另一个优势是它对原来的布局以及元素的行为没有任何影响。而clip隐藏会导致空间focus的焦点发生细微的变化，在特定条件下是有体验问题的。它的不足之处就是不具有普遍适用性，需要其他元素配合进行隐藏。-->
<!--    定位在元素的后面：-->
    <div class="content">donna</div>
</div>

</body>

</html>